<template>
  <div class="box">
    <!-- header 头部-->
    <header class="clearBox">
        <div class="header_img">
            <img src="/img/logo.png" >
        </div>
            <div class="header_title">
                <h1>雷蛇外设店</h1>
                <p>让每个人都能体验科技的乐趣</p>
            </div>		
    </header>
    <section>
        <!-- 登录样式表 -->
        <div class="section_form">
            <div class="section_form_title">
                <a href="#">账号登录</a>
                <a href="#">扫码登录</a>
            </div>
            <div class="section_input">
                <form action="" method="">
                    <input type="text" placeholder="用户名" />
                    <br>
                    <input type="password"  placeholder="密码" />
					<input type="button" name="" id="" value="登录" @click="login"> 
					<!--
						在submit里绑定一次跳转会多触发一次跳转，且url会多个问号，避免出现这样的写法
					 <input type="submit" name="" id="" value="登录" @click="login">  
					-->
                </form> 
                <p class="section_input_a"><a href="#">手机短信登录</a>
                    <router-link to="/Register"> >/注册 </router-link>
                </p>
                <!-- 注册和忘记密码 -->
                <p class="section_input_zw" >
                    <router-link to="/Register">立即注册</router-link>
                    <a href="@/views/Register">&nbsp;忘记密码？</a>
                </p>
            </div>
            
        </div>
    
    </section>
    <footer>
        <p>简体&nbsp;|&nbsp;繁体&nbsp;|&nbsp;English&nbsp;|&nbsp;常见问题&nbsp;|&nbsp;隐私政策</p>
        <p>XX公司版权所有-京ICP备10046444--京公网安办京ICP证110507号</p>
    </footer>
</div>
</template>

<script>
import {Data} from '../assets/js/request'
import axios from 'axios'
export default {
	methods:{
		async login(){
			let data = {
				phone:"13211067427",
				password:"adc486153"
			}
			let res = await Data('post','login',data)
			sessionStorage.setItem('token',res.token)
			sessionStorage.setItem('username',res.name)
			let isLogin =  true
			sessionStorage.setItem('isLogin',isLogin)
			window.location.href = '/'
		}
	}
}
</script>

<style scoped>
.box {
	width: 100%;
	background: url('/img/login-bg.jpg');
	background-size: 100% 100%;

}
p{
	font-size: 12px;
	color: #A3A3A3;
}
h1{
	font-size: 18px;
	color: #A3A3A3;
}
a{
	color: white;
}
a:active{
	color: #FF6700;
}
.clearBox::after {
	content: '';
	display: block;
	height: 0;
	visibility: hidden;
	clear: both;
}
header{
	width: 1135px;
	height: 97px;
	/* background-color: #00FFFF; */
	margin: 0 auto;
	
}
.header_img{
	width: 55px;
	height: 55px;
	float:left;
	margin-right: 22px;
	margin-top: 22px;
}
.header_img img{
	width: 100%;
	height:100%;
	
}
.header_title{
	width: 170px;
	height:55px;
	line-height: 31px;
	/* float:left; */
	float:left;
	margin-top: 22px;
	text-align: center;
}
section{
	/* width: 1874px; */
	/* background: url(/img/login/login-bg.jpg) -500px 0px; */
	height: 578px;
	position: relative;
}

.section_form{
	width: 407px;
	/* height: 100%; */
	/* border: 1px red solid; */
	margin-top:30px;
	background-color: #333333;
	position: absolute;
	left: 551px;
	z-index: 2;
}
.section_form_title{
	width: 237px;
	height: 23px;
	/* border: 1px red solid; */
	margin: 0 auto;
	padding-top: 75px;
	display: flex;
	justify-content: space-between;
}
.section_form_title a{	
	height: 17px;	
	font-size: 17px;
	position: relative;
	display: inline-block;

}
.section_form_title a:first-child{
color: #FF6700;
}
.section_form_title a:first-child::after{
	content: '';
	width: 1px;
	height: 17px;
	display: inline-block;
	position: absolute;
	left: 110px;
	background-color:#e0e0e0;
}
.section_input{
	width: 354px;
/* height: 600px; */
	margin: 0 auto;
	/* border: 1px black solid; */
	overflow: hidden;
}
.section_input form input{
	width: 350px;
	height: 43px;
	margin-top: 16px;
	background-color: black;
	padding-left: 5px;
	color: white;
}
.section_input [type=button]{
	border: 0px;
	color: white;
	background-color:#FF6700;
}
.section_input_a{
	padding-top: 11px;
	text-align: center;
}
.section_input_a a{
	font-size: 12px;
	color: red;
}
.section_input_zw{
	padding-top: 37px;
	text-align: center;
	padding-bottom: 70px;
	width: 237px;
    height: 23px;
    /* border: 1px red solid; */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
.section_input_zw a{
	font-size: 18px;
	font-weight: 400;
	position: relative;
}
.section_input_zw a:first-child::after{
	content: '';
    width: 1px;
    height: 17px;
    display: inline-block;
    position: absolute;
    left: 110px;
    background-color: #e0e0e0;
}
.qt{
	position: relative;
	top:-10px;
	left: 134px;
	display: inline-block;
}
.section_form_icfont{
	width: 100%;
	text-align: center;
	
}
.qq{
	color: #0288D1;
}
.weibo{
	color: #D32F2F;
}
.zfb{
	color: #00AAEE;
}
.weixin{
	color: #00D20D;
}
footer{
	width: 100%;
	height: 153px;
	/* border: 1px red solid; */
	font-size: 12px;
}
footer p:first-child{
	margin-top: 100px;
	margin-bottom: 20px;
}
footer p{
	text-align: center;
	/* padding-left: 100px; */
}
</style>

